<template>
  <div>
    <div class="login">{{ title }}</div>
    <van-cell-group>
      <van-field
        v-model.trim="username"
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        v-model.trim="password"
        label="密码"
        placeholder="请输入用户名"
      />
    </van-cell-group>
    <div class="body">
      <div
        class="button"
        @click="onSubmit"
        :style="`background-color:${!clicked ? '#FA6D1D' : 'green'}`"
      >
        {{ button }}
      </div>
    </div>
    <div class="submit">
      <div @click="submit">{{ isSubmit }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HmLogin",
  data() {
    return {
      clicked: false,
      title: "面经登录",
      button: "提交",
      isSubmit: "注册",
      username: "heima",
      password: "password",
    };
  },
  methods: {
    async onSubmit() {
      if (this.isSubmit === "注册") {
        let res = await axios({
          method: "post",
          url: "https://interview-api-t.itheima.net/h5/user/login",
          data: { username: this.username, password: this.password },
        });
        localStorage.setItem("token", res.data.data.token);
        this.$router.push({
          path: "/home/interview",
          query: {
            token: res.data.data.token,
          },
        });
      } else {
        let res = await axios({
          method: "post",
          url: "https://interview-api-t.itheima.net/h5/user/register",
          data: { username: this.username, password: this.password },
        });
        console.log("注册成功" + res);
      }
    },
    submit() {
      if (this.isSubmit === "注册") {
        this.title = "面经注册";
        this.button = "注册";
        this.isSubmit = "登录";
        this.clicked = true;
      } else {
        this.title = "面经登录";
        this.button = "提交";
        this.isSubmit = "注册";
        this.clicked = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  display: flex;
  justify-content: center;
  margin: 10px;
}
.login {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  width: 95%;
  height: 40px;
}
.submit {
  display: flex;
  justify-content: end;
  margin-right: 20px;
}
</style>
